<template>
    <div class="wrapper">
      <!--header部分-->
      <!-- <header>
          <p>用户信息</p>
      </header> -->
      <el-page-header @back="goBack" content="用户页面">
      </el-page-header>
      <!--用户信息部分-->
      <!--表单部分-->
      <el-col :span="12" position="center">
        <div class="demo-basic--circle">
          <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
        </div>
      </el-col>  
      <el-descriptions title="用户信息" direction="vertical" :column="2" border >
      <el-descriptions-item label="用户名">{{user.userName}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{user.userId}}</el-descriptions-item>
      <el-descriptions-item label="外卖常用地址" :span="2">{{deliveryAddress == null ?'尚未填写' :deliveryAddress.address}}</el-descriptions-item>
      <el-descriptions-item label="备注">
          <el-tag size="small">暂无</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="性别">{{user.userSex == 1 ? '男':'女'}}</el-descriptions-item>
      </el-descriptions>
      
      <div class="button-upload">
          <el-button type="success" round @click="uploadImg">上传头像</el-button>
      </div>
  
      <div class="button-update">
          <el-button type="success" round @click="updateUser">修改用户信息</el-button>
      </div>
      <div class="button-save">
          <el-button type="success" round @click="saveUserMessage">保存用户信息</el-button>
      </div>
      <div class="button-logout">
          <el-button type="danger" round @click="loginOut">退出登录</el-button>
      </div>
  
      <!--底部菜单部分--> 
      <Footer></Footer>
    </div>   
      
  </template>
  
  <script>
  import Footer from "../components/Footer.vue"
  export default {
      name: 'UserMessageBK',
      data() {
          return {
              user: {},
              deliveryAddress: {},
              circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",//到时切换成用户的头像
          }
      },
      created() {
          this.user = this.$getSessionStorage('user');
          this.deliveryAddress = this.$getLocalStorage(this.user.userId);
          // console.log(this.deliveryAddress)
      },
      methods: {
          updateUser() {
              this.$router.push({
                  path:'/editUser',
              })
          },
          saveUserMessage() {
  
          },
          uploadImg() {
  
          },
          loginOut() {
              this.$removeSessionStorage('user');
              this.$router.push({path:'/login'});
          },
          goBack() {
              this.$router.go(-1);
          }
      },
      components: {
          Footer
      }
  }
  </script>
  
  <style scpoed>
  /* 总容器 */
  .wrapper {
      width: 100%;
      height: 100%;
  }
  
  /* header */
  .wrapper header {
      width: 100%;
      height: 12vw;
      background: #0097FF;
      color: #FFF;
      font-size: 4.8vw;
  
      position: fixed;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
  }
  
  /* 商家信息部分 */
  .wrapper .user-info {
      width: 100%;
      height: 20vw;
  
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .wrapper .user-info h3 {
      font-size: 5vw;
      /* color: #555; */
  }
  .wrapper .user-info p {
      font-size: 3vw;
      color: #666;
      margin-top: 1vw;
  }
  
  </style>